<template>
  <div>
    <el-row>
      <el-col :span="2" :offset="22">
        <el-button type="primary" @click="submit()">发表文章</el-button>
      </el-col>
    </el-row>
    <mavon-editor v-model="content" ref="md" @change="change" style="min-height: 600px" />

    <el-dialog title="发布文章" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="文章标题:" label-width="120px" prop="title">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="封面图片:" label-width="120px" prop="photo">
          <el-input v-model="form.photo" autocomplete="off"></el-input>
        </el-form-item>
        <img  v-if="form.photo!=''" :src="form.photo" style="width:120px;height:120px;margin:0 auto;"/>
        <el-form-item label="标签:" label-width="120px" >
          <el-input v-model="form.tag" autocomplete="off" style="width:76%"></el-input>
          <el-button @click="addTag();">添加</el-button>
        </el-form-item>
        <div class="cloud">
          <ul class="cloud">
            <a href="javascript:void(0);" v-if="tags[0]">{{tags[0]}}</a>
            <a href="javascript:void(0);" v-if="tags[1]">{{tags[1]}}</a>
            <a href="javascript:void(0);" v-if="tags[2]">{{tags[2]}}</a>
            <a href="javascript:void(0);" v-if="tags[3]">{{tags[3]}}</a>
            <a href="javascript:void(0);" v-if="tags[4]">{{tags[4]}}</a>
          </ul>
        </div>
        <el-form-item label="分类:" label-width="120px" prop="sortName">
          <el-input v-model="form.sortName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="概括:" label-width="120px" prop="summary">
          <el-input v-model="form.summary" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入组件 及 组件样式
import { mavonEditor } from "mavon-editor";
import { getCreateTime } from "../util/dateUtil.js";
import "mavon-editor/dist/css/index.css";
export default {
  components: {
    mavonEditor
  },
  data() {
    return {
      content: "", // 输入的markdown
      html: "", // 及时转的html,
      dialogFormVisible: false,
      form: {
        title: "",
        tag: "",
        sortName: "",
        summary: "",
        photo:""
      },
      tags: [],
      rules: {
        summary: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入概括"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        title: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入文章标题"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        sortName: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入分类"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        photo:[
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入图片链接"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    // 所有操作都会被解析重新渲染
    change(value, render) {
      // render 为 markdown 解析后的结果[html]
      this.html = render;
    },
    addTag() {
      if (this.form.tag == "") {
        return;
      }
      if (this.tags.length > 5) {
        this.$message.error("标签最多添加5个");
        return;
      }
      this.tags.push(this.form.tag);
      this.form.tag = "";
    },
    // 提交
    submit() {
      if (this.content == "") {
        this.$message.error("请输入文章内容");
        return;
      }
      this.dialogFormVisible = true;
      console.log(this.content);
      console.log(this.html);
    },
    add() {
      this.$refs["form"].validate(valid => {
        if (valid&&this.tags.length!=0) {
          let session=window.localStorage
          let blogs=JSON.parse(session.getItem('blogs'))
          blogs=blogs==null?[]:blogs
          let uid=1
          uid=blogs==null?1:parseInt(blogs[blogs.length-1].uid)+1
          console.log(this.tags)
          let blog={
            uid,
            blogSort:{
              blorSortName:this.form.sortName
            },
            clickCount:0,
            collectCount:0,
            createTime:getCreateTime(),
            summary:this.form.summary,
            title:this.form.title,
            photoList:[
              this.form.photo
            ],
            content:this.html,
            tags:this.tags,
            comments:[],
            author:"蒙家辉"
          }
          blogs.push(blog)
          this.$message.success("发表文章成功")
          this.dialogFormVisible=false
          session.setItem("blogs",JSON.stringify(blogs))
        } else {
          this.$message.error("请正确填写信息")
        }
      });
    }
  },
  mounted() {}
};
</script>

<style>
</style>